<!-- 个人用户收益信息统计 -->
<template>
  <div>
    <HomeCard
      title="个人用户收益信息统计"
      isTimer
      isSearch
      isDept
      headIcon="img_10"
      @checkedTimer="checkedTimer"
      @checkedSearch="checkedSearch"
    >
      <template v-slot:content>
        <div class="business-info-right">
          <HomeEcharts ref="EchartsRef" :echartsOption="echartsOption" />
        </div>
      </template>
    </HomeCard>
  </div>
</template>

<script type="text/javascript">
import HomeCard from "@/pages/components/homeCard/index.vue";
import HomeEcharts from "@/pages/components/homeEcharts/index.vue";

import { platformCompanyUserEarningsStatistics } from "@/api/home";

export default {
  name: "todo-page",
  components: {
    HomeCard,
    HomeEcharts,
  },
  data() {
    return {
      echartsOption: {
        backgroundColor: "#fff",
        legend: {
          itemWidth: 20,
          itemHeight: 4,
          // itemGap: 10,
          show: true,
          data: ["金额", "数量"],
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        dataZoom: [
          {
            // 设置滚动条的隐藏与显示
            show: true,
            // 设置滚动条类型
            type: "slider",
            // 设置背景颜色
            // backgroundColor: "#fefefe",
            // // 设置选中范围的填充颜色
            // fillerColor: "#2d8cf0",
            // // 设置边框颜色
            // borderColor: "#2d8cf0",
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 数据窗口范围的起始数值
            startValue: 0,
            // 数据窗口范围的结束数值（一页显示多少条数据）
            endValue: 3,
            // empty：当前数据窗口外的数据，被设置为空。
            // 即不会影响其他轴的数据范围
            filterMode: "empty",
            // 设置滚动条宽度，相对于盒子宽度
            width: "50%",
            // 设置滚动条高度
            height: 8,
            // 设置滚动条显示位置
            left: "center",
            // 是否锁定选择区域（或叫做数据窗口）的大小
            zoomLoxk: true,
            // 控制手柄的尺寸
            handleSize: 0,
            // dataZoom-slider组件离容器下侧的距离
            bottom: 3,
          },
          {
            // 没有下面这块的话，只能拖动滚动条，
            // 鼠标滚轮在区域内不能控制外部滚动条
            type: "inside",
            // 滚轮是否触发缩放
            zoomOnMouseWheel: false,
            // 鼠标滚轮触发滚动
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
          },
        ],
        grid: {
          top: "15%",
          left: "10%",
          right: "5%",
          bottom: "15%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: false,
              color: "#A582EA",
            },
            axisLabel: {
              color: "#A582EA",
              width: 100,
              margin: 20,
            },
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],

        yAxis: [
          {
            type: "value",
            name: "金额",
            min: 0,
            max:120,
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "数量",
            min: 0,
            max:120,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "金额",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              color: "#A582EA",
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "数量",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              color: "#f6ca9d",
            },
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      },
      dateType: "Day",
      orgId: "",
      userId: "",
    };
  },
  methods: {
    checkedTimer(item) {
      this.dateType = item;
      this.platformCompanyUserEarningsStatisticsData();
    },
    checkedSearch(item) {
      this.orgId = item;
      this.platformCompanyUserEarningsStatisticsData();
    },
    async platformCompanyUserEarningsStatisticsData() {
      let params = {
        dateType: this.dateType,
        orgId: this.orgId,
        userId: this.userId,
      };
      let data = await platformCompanyUserEarningsStatistics(params);
      if (data) {
        let moneyArr = [];
        let countArr = [];
        let userNameArr = [];
        data.forEach((o) => {
          moneyArr.push(o.money);
          countArr.push(o.count);
          userNameArr.push(o.userName);
        });
        if(data.length == 0){
          this.echartsOption.dataZoom[0].show = false
        }
        this.echartsOption.xAxis[0].data = userNameArr;
        this.echartsOption.series.forEach((o) => {
          if (o.name == "金额") {
            o.data = moneyArr;
          }
          if (o.name == "数量") {
            o.data = countArr;
          }
        });
        this.$refs.EchartsRef.handleSetVisitChart();
      }
    },
  },
  async mounted() {
    this.platformCompanyUserEarningsStatisticsData();
  },
};
</script>

<style lang="less" scoped>
.business-info-right {
  margin: 18px 0 0 0;
  width: 100%;
  height: 426px;
  background: #f2f2f2;
}
</style>
